<template>
	<el-dialog :title="'打印预览'" v-model="visible" :width="1200" destroy-on-close @closed="$emit('closed')">
		<div class="printMain" ref="printMain">
			<div class="item" v-for="(item,index) in orderlist" :key="index">
				<div>
					<!-- 0'采购入库单'   1'采购退货单'   2空瓶回收 -->
					<el-row class="title">{{ item.storageOrderType == '0' ? '采购入库单' : item.storageOrderType == '1' ? '采购退货单' : '采购回瓶单'  }}</el-row>
					<el-row class="subtitle">
						<el-row style="width: 1000px;">
							<div class="h-10"></div>
							<el-col :span="10">单据编号：{{ item.storageOrderCode }}</el-col>
							<el-col :span="2"></el-col>
							<el-col :span="2"></el-col>
							<el-col :span="10" style="text-align: right;">库存组织：{{item.purchaseUnityFullName}}</el-col>
							<div class="h-5"></div>
							<el-col :span="10">业务日期：{{item.applyDate.length>10?item.applyDate.slice(0, 10):item.applyDate}}</el-col>

							<el-col :span="2"></el-col>
							<el-col :span="2"></el-col>

							<el-col :span="10" style="text-align: right;">供应商：{{item.supplierFullName}}</el-col>
							<div class="h-10"></div>
							<el-table :data="item.storageOrders" border style="width: 100%;border: 2px solid #ebeef5;" show-summary>
								<el-table-column label="序号" type="index" width="80" />
								<!-- <el-table-column label="物料编码" prop="materialCode"></el-table-column> -->
								<el-table-column width="200" label="物料名称" prop="materialName"></el-table-column>
								<el-table-column label="规格型号" prop="materialSpecs"></el-table-column>
								<!-- <el-table-column label="厂家名称" width="200" prop="supplierFullName"></el-table-column> -->
								<el-table-column label="单位" prop="unitName"></el-table-column>
								<el-table-column prop="qty" label="数量"></el-table-column>
								<el-table-column label="单价" prop="">
									<template #default="scope">
										{{scope.row.price}}
									</template>
								</el-table-column>
								<el-table-column label="金额" prop="totalAmount"> </el-table-column>
								<el-table-column width="200" label="供应商" prop="supplierFullName"></el-table-column>
								<el-table-column width="100" label="备注" prop="remarks"></el-table-column>
							</el-table>
							<div class="h-30"></div>
							<div class="h-30"></div>
							<el-col :span="8">制单人：{{ item.documentsUser }}</el-col>
							<!-- updateUser -->
							<el-col :span="8" class="text-c">修改人：{{ item.updateName }}</el-col>
							<el-col :span="8" class="text-r">审核人：{{ item.reviewed || '无'}}</el-col>
							<div class="h-5"></div>
							<el-col :span="8">制单日期：{{ item.createTime.length>10? item.createTime.slice(0, 10):item.createTime }}</el-col>
							<el-col :span="8" class="text-c">修改时间: {{ item.updateTime.length>10? item.updateTime.slice(0, 10):item.updateTime }}</el-col>
							<el-col :span="8" class="text-r">审核时间：{{item.reviewTime?item.reviewTime.length>10? item.updateTime.slice(0, 10):item.updateTime : '无'}}</el-col>
						</el-row>
					</el-row>

					<div class="h-30"></div>

				</div>
				<div style="page-break-after: always;"></div>
			</div>
		</div>
		<div class="interval"></div>
		<div class="subtitle">
			<el-button type="primary" @click="print">普通打印</el-button>
		</div>

	</el-dialog>
</template>

<script>
	import print from '@/utils/print'
	export default {
		data() {
			return {
				visible: false,
				orderlist: []
			}
		},
		methods: {
			//显示=
			open() {
				this.visible = true;
				return this;
			},
			//表单注入数据
			setData(dataarr) {
				debugger
				console.log('dataarr:',dataarr)
				this.orderlist = dataarr
			},
			print() {
				//直接传入REF或者querySelector
				print(this.$refs.printMain)
			},
		}
	}
</script>

<style scoped>
    .h-5{
		height: 5px;
		width: 100%;
	}
    .h-10{
		height: 10px;
		width: 100%;
	}
	.h-30{
		height: 30px;
		width: 100%;
	}
	.text-c{
	    text-align: center;
    }
    .text-r{
	    text-align: right;
    }
	.el-tablebody{
		    border: 1px solid #ebeef5;
		    width: 100%;
			border-collapse: collapse;
	}
	.title {
		display: flex;
		justify-content: center;
		font-size: large;
		font-weight: bolder;
	}

	.subtitle {
		display: flex;
		justify-content: center;
	}

	.interval {
		height: 20px;
		width: 100%;
	}
	th, td {

	  border: 1px solid #ebeef5; /* 为单元格添加边框 */
	  padding: 8px;
	  text-align: left; /* 可选，设置文本对齐方式 */
	}



	@media print {

		/* 横向打印样式 */
		@page {
			size: landscape;
			/* 设置页面为横向 */
			margin: 10mm;
			/* 根据需要设置页边距 */
		}

		body {
			margin: 0;
			padding: 0;
		}

		.print-main {
			/* 这里应用于要打印的元素的样式 */
		}
	}
</style>
